
<template>
  <section :style="areaStyle">
    <el-select
      v-model="provinceAreaCode"
      clearable
      placeholder="请选择"
      @change="getCityList"
      :style="provinceStyle"
    >
      <el-option
        v-for="(item, index) in provinceList"
        :key="index"
        :label="item.name"
        :value="item.code"
      >
        {{ item.name }}
      </el-option>
    </el-select>
    <el-select
      v-model="cityAreaCode"
      placeholder="请选择"
      @change="getAreaList"
      :style="cityStyle"
      clearable
    >
      <el-option
        v-for="(item, index) in cityList"
        :key="index"
        :label="item.name"
        :value="item.code"
      >
        {{ item.name }}
      </el-option>
    </el-select>
    <el-select
      v-model="regionAreaCode"
      placeholder="请选择"
      :style="regionStyle"
      clearable
    >
      <el-option
        v-for="(item, index) in areaList"
        :key="index"
        :label="item.name"
        :value="item.code"
      >
        {{ item.name }}
      </el-option>
    </el-select>
  </section>
</template>
<script>
import AreaApi from '@/api/common/AreaAPI'
export default {
  name: 'Area',
  props: {
    /**
     * 省
     */
    province: {
      type: String,
      required: false,
      default: () => null
    },
    provinceStyle: Object,
    /**
     * 市
     */
    city: {
      type: String,
      required: false,
      default: () => null
    },
    cityStyle: Object,
    /**
     *  区
     */
    region: {
      type: String,
      required: false,
      default: () => null
    },
    regionStyle: Object,
    areaStyle: Object
  },
  data () {
    return {
      loading: true,
      // 省list
      provinceList: [],
      // 市list
      cityList: [],
      // 区list
      areaList: [],
      // 省code
      provinceAreaCode: this.province,
      // 市code
      cityAreaCode: this.city,
      // 区code
      regionAreaCode: this.region
    }
  },
  watch: {
    /**
     * 监听省code
     * @param val
     */
    provinceAreaCode (val) {
      this.$emit('update:province', val)
    },

    /**
     * 监听市code
     * @param val
     */
    cityAreaCode (val) {
      this.$emit('update:city', val)
    },

    /**
     * 监听区code
     * @param val
     */
    regionAreaCode (val) {
      this.$emit('update:region', val)
    },

    /**
     * 监听省
     * @param val
     */
    province (val) {
      this.provinceAreaCode = val
      if (val) {
        this.getCityList(val)
      } else {
        this.areaList = []
      }
    },

    /**
     * 监听市
     * @param val
     */
    city (val) {
      this.cityAreaCode = val
      if (val) {
        this.getAreaList(val)
      }
    },

    /**
     * 监听区
     * @param val
     */
    region (val) {
      this.regionAreaCode = val
    }
  },
  methods: {
    /**
     * 获取省
     */
    getProvince () {
      AreaApi.getAllProvince().then((result) => {
        if (result.code === 0) {
          this.provinceList = result.data
        }
      })
    },

    /**
     * 获取市
     * @param code
     */
    getCityList (code, isChange = true) {
      if (isChange) {
        this.cityAreaCode = ''
        this.regionAreaCode = ''
      }
      const params = {}
      params.code = code
      AreaApi.getCity(params).then((result) => {
        if (result.code === 0) {
          this.cityList = result.data
        }
      })
    },

    /**
     * 获取地区
     * @param code
     */
    getAreaList (code, isChange = true) {
      if (isChange) {
        this.regionAreaCode = ''
      }
      const params = {}
      params.code = code
      AreaApi.getArea(params).then((result) => {
        if (result.code === 0) {
          this.areaList = result.data
        }
      })
    }
  },
  mounted () {
    this.getProvince()
    if (this.province) {
      this.getCityList(this.province, false)
    }
    if (this.city) {
      this.getAreaList(this.city, false)
    }
  }
}
</script>
<style scoped>
</style>

